<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script src="../../script/TouchSlide.1.1.js"></script>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css">
    <meta charset="UTF-8">
    <style>
        :-moz-placeholder{
            color: #eeeeee;
        }
        ::-moz-placeholder
        {
            color: #eeeeee;
        }
        ::-webkit-input-placeholder{
            color: #eeeeee;
        }
        :-ms-input-placeholder{
            color: #eeeeee;
        }
        html {
            height: 100%;
            width: 100%;
            display: table;
        }

        body {
            display: table-cell;
            width: 100%;
            height: 100%;
        }
        .all{
            height: 100%;
            width: 100%;
        }
        .title{
            font-size: 2rem;
            color: white;
            line-height: 4rem;
        }
        .main{
            position: absolute;
            height: 100%;
            width: 100%;
            background-color: #f6f6f6;
            overflow: auto;
        }
        .top_banner{
            width: 100%;
            background-color: #f6f6f6;
        }
        .top_nav{
            top: 1rem;
            position: absolute;
            width: 100%;
            height: 5rem;
        }
        .top_nav .logo{
            position: absolute;
            left: 1rem;
            width: 4rem;
            height: 2.6rem;
        }
        .search_input{
            position: absolute;
            width: 70%;
            height: 5rem;
            left: 6rem;
        }
        .search_input input{
            background-color:rgba(255,255,255,0.4);
            width:100%;
            height: 3rem;
            color: #eeeeee;
            font-size: 1.3rem;
            border-radius: 1.5rem;
            -moz-box-shadow:0.1rem 0.1rem 0.8rem #eeeeee; 
            -webkit-box-shadow:0.1rem 0.1rem 0.8rem #eeeeee; 
            box-shadow:0.1rem 0.1rem 0.8rem #eeeeee;
            text-indent:1rem;
        }
        .search{
            width: 2.3rem;
            height: 2rem;
            position: absolute;
            right: 1rem;
            top:0.5rem;
        }
        .tips{
            color: #eeeeee;
            width: 100%;
            font-size: 1.15rem;
            position: absolute;
            bottom: -0.2rem;
            text-indent:1rem;
        }
        .sign_in{
            position: absolute;
            right: 1.3rem;
            top: 0.5rem;
            width: 3rem;
            height: 4rem;
        }
        .top_slide{
            position: absolute;
            top: 18rem;
            height: 2rem;
            width: 100%;
        }
        .top_slide ul{
            margin: auto;
            width: 10rem;
        }
        .top_slide ul li{
            width: 1.3rem;
            height: 1.3rem;
            background-color: #f6f6f6;
            border-radius: 1rem;
            float: left;    
            margin-left: 1rem; 
            margin-right: 1rem;   
        }
        .top_slide ul .on{
            background-color: #f84d1f;
            border: 0.1rem solid #CCC;
        }
        .mid_rec_hid{
            width: 100%;
            overflow: hidden;
            height: 14.5rem;
            border-bottom: 0.1rem solid #cccccc;
            border-top: 0.1rem solid #cccccc;
        }
        .rec_tit{
            width: 100%;
            height: 4rem;
            margin-top: 0.5rem;
        }
        .tit_1{
            height: 4rem;
            width: 6rem;
            background: url('../../image/tit_bg.png')no-repeat;
            display: block;
            font-size: 1.5rem;
            font-weight: bold;
            line-height: 4rem;
            background-size:100% 90%;
            color: #666666;
            float: left;
        }
        .tit_2{
            display: block;
            float: left;
            height: 4rem;
            width: 14rem;
            font-size: 1.3rem;
            line-height: 4.2rem;
            color: #999999;
            margin-left: 1rem;
        }
        .hot_tit{
            display: block;
            float: right;
            height: 4rem;
            width: 4rem;
            font-size: 1.6rem;
            line-height: 3.8rem;
            color: #f7911b;
        }
        .look_tit{
            display: block;
            float: right;
            height: 4rem;
            width: 4rem;
            font-size: 1.4rem;
            line-height: 4rem;
            color: #666666;
        }
        .mid_rec {
            position: relative;
            left: 33.33%;
            top: 0.5rem;
            width: 33.33%;
        }
        .mid_rec .bd{
            width: 100%;
        }
        .bd .div0,.bd .div1,.bd .div2{
            background-color:white;
            -moz-box-shadow:0px 0rem 0.3rem #999999;
            -webkit-box-shadow:0px 0rem 0.3rem #999999;
            box-shadow:0px 0rem 0.3rem #999999;
        }
        .slide_img{
            width: 40%;
            height: 100%;
            background-color: yellow;
            float: left;
        }
        .slide_title{
            float: left;
            width: 55%;
            height: 20%;
            font-size: 1.5em;
            font-weight: bold;
            position: relative;
            top: 10%;
            left: 5%;
        }
        .slide_text{
            float: left;
            width: 55%;
            font-size: 1.3em;
            font-weight: bold;
            position: relative;
            top: 10%;
            left: 5%;
            word-break:break-all;
            display:-webkit-box;
            -webkit-line-clamp:2;
            -webkit-box-orient:vertical;
            overflow:hidden;   
        }
        .slide_price{
            width: 30%;
            height: 20%;
            font-size: 1.6em;
            color: orangered;
            position: relative;
            float: left;
            bottom: -15%;
            left: 5%;
        }
        .slide_time{
            width: 30%;
            height: 20%;
            font-size: 1.5em;
            color: #666666;
            position: relative;
            float: left;
            bottom: -15%;
            left: 11%;
        }
        .type{
            width: 100%;
            height: 14rem;
        }
        .type ul li{
            width: 20%;
            height: 7rem;
            float: left;
        }
        .type ul li .type_img{
            width: 4.5rem;
            height: 4.5rem;
            border-radius: 2.5rem;
            margin: auto;
            margin-top: 0.5rem;
        }
        .type_img img{
            width: 100%;
            height: 100%;
            border-radius: 100%;
        }
        .type ul li .type_tit{
            display: block;
            width: 100%;
            text-align: center;
            height: 2rem;
            font-size: 1.2rem;
            line-height: 2rem;
        }
        .type_main{
            height: 46rem;
            width: 100%;
            transition: all 1s;
            margin-top: 1rem;
            overflow: hidden;
        }
        .real_type_main{
            height: 40rem;
            width: 606%;
        }
        .type_item{
            display: inline;
            height: 45rem;
            width: 15.8%;
            float: left;
            margin-left: 1rem;
            margin-right: 1rem;
            border-radius: 1rem;
        }
        .type_title{
            width: 100%;
            height: auto;
        }
        .type_title img{
            width: 100%;
        }
        .class_item{
            width: 100%;
            height: 6rem;
            margin-top: 1rem;
            background-color: #ea5e5c;
            border-radius: 1rem;
        }
        .hot_main{
            width: 100%;
            margin: auto;
            height: auto;
        }
        .hot_main ul {
            width: 100%;
        }
        .hot_main ul li{
            margin-top: 1rem;
            margin-left: 0.8rem;
            float: left;
            width: 47%;
            height: 20rem;
            border-radius: 1rem;
            overflow: hidden;
        }
        .hot_main ul li .hot_img_box{
            height: 60%;
            width: 100%;
            background-color: pink;
            border-top-left-radius: 1rem;
            border-top-right-radius: 1rem;
            float: left;
        }
        .hot_main ul li .hot_info{
            height: 40%;
            width: 100%;
            border-bottom-left-radius: 1rem;
            border-bottom-right-radius: 1rem;
            float: left;
        }
        .hot_main ul li .hot_shadow{
            height: 100%;
            width: 100%;
            border-radius: 1rem;
            background-color: rgba(0, 0, 0, 0.4);
            position: relative;
            left: 0;
            top: 100%;
        }
        .hot_tips{
            display: block;
            width: 8rem;
            height: 5rem;
            margin: auto;
            text-align: center;
            font-size: 1.8rem;
            line-height: 5rem;
            background: url('../../image/tit_bg.png')no-repeat;
            background-size:100% 90%;
        }
        .hot_text{
            width:95%;
            height: 3.5rem;;
            word-break:break-all;
            display:-webkit-box;
            -webkit-line-clamp:2;
            -webkit-box-orient:vertical;
            overflow:hidden;
            font-size: 1.3rem;
            line-height: 1.8rem;
            margin: auto;
            margin-top: 0.5rem;
            font-weight: bold;
            letter-spacing:0.1rem;
        }
        .hot_user_info{
            width: 70%;
            height: 50%;
            float: left;
        }
        .hot_head_img{
            width: 3rem;
            height: 3rem;
            margin-top: 0.8rem;
            border-radius: 3rem;
            background-color: red;
            float: left;
        }
        .hot_user_name{
            margin-top: 0.7rem;
            margin-left: 0.5rem;
            width: 6rem;
            height: 1.5rem;
            float: left;
            font-size: 1.3rem;
            color: orangered;
        }
        .hot_time{
            margin-left: 0.6rem;
            width: 6rem;
            height: 1.5rem;
            float: left;
            font-size: 1.2rem;
            color: #999999;
        }
        .zan{
            width:30%;
            height: 50%;
            float: left;
        }
        .zan_icon{
            width: 2rem;
            height: 2rem;
            float: left;
            margin-top: 1.2rem;
        }
        .zan_num{
            width: 3rem;
            height: 1.5rem;
            font-size: 1.2rem;
            float: left;
            margin-top: 1.5rem;
        }
    </style>
</head>
<body>
<div class="all">
    <div class="main">
        <div class="top_banner">
            <div id="leftTabBox" class="tabBox">
                    <div class="bd">
                            <ul style="width: 33%;">
                                <li style="z-index:1;">
                                    <div style="width:100%;height:22rem;border-bottom-left-radius: 3rem;border-bottom-right-radius: 3rem;overflow: hidden;">
                                        <img src="../../image/banner.png" style="width:100%" />
                                    </div>
                                </li>      
                            </ul>
                            <ul style="width: 33%;">
                                <li style="z-index:1;">
                                    <div style="width:100%;height:22rem; background-color: blue;border-bottom-left-radius: 3rem;border-bottom-right-radius: 3rem;"></div>
                                </li>
                            </ul>
                            <ul style="width: 33%;"> 
                                <li style="z-index:1;">
                                    <div style="width:100%;height:22rem; background-color: rgb(251, 255, 0);border-bottom-left-radius: 3rem;border-bottom-right-radius: 3rem;"></div>
                                </li>            
                            </ul>
                    </div>
                    <div class="top_nav">
                        <img class="logo" src="../../image/logo.png">
                        <div class="search_input">
                            <input name="search" type="text" placeholder="搜各大商城宝贝 购物更省钱" />
                            <img class="search" src="../../image/search.png">
                            <span class="tips">复制商品名称--在芒客粘贴并搜索--获得返利</span>
                        </div>
                        <img class="sign_in" src="../../image/sign_in.png" >
                    </div>
                    <div class="hd top_slide">
                        <ul>
                            <li class="slide_item">
                                
                            </li>
                            <li class="slide_item"></li>
                            <li class="slide_item"></li>
                        </ul>
                    </div>
                </div>
        </div>
        <div class="mid_rec_hid">
            <div class="rec_tit">
                <span class="tit_1">友圈号外</span>
                <span class="tit_2">分享热门事情热门人物</span>
                <span class="look_tit">关注</span>
                <span class="hot_tit">热门</span>
            </div>
            <div class="mid_rec" id="mid_rec">
                <div class="bd">
                    <ul>
                        <li style="z-index:1;">
                            <div class="div0" style="width:100%;height:8rem;border-radius: 0.5rem;">
                                    <div class="slide_img"></div>
                                    <div class="slide_title">asda阿萨德</div>
                                    <p class="slide_text">阿萨德高度发达速度从中选出阿斯达四大所大阿斯达四大所大所多撒大所多</p>
                                    <div class="slide_price">17.5</div>
                                    <div class="slide_time">9:31</div>
                            </div>
                        </li>      
                    </ul>
                    <ul>
                        <li style="z-index:1;">
                            <div class="div1" style="width:100%;height:8rem;border-radius: 0.5rem;">
                                    <div class="slide_img"></div>
                                    <div class="slide_title">asda阿萨德</div>
                                    <p class="slide_text">大所大所多撒大所多</p>
                                    <div class="slide_price">17.5</div>
                                    <div class="slide_time">9:31</div>
                            </div>
                        </li>
                    </ul>
                    <ul>
                        <li style="z-index:1;">
                            <div class="div2" style="width:100%;height:8rem;border-radius: 0.5rem;">
                                    <div class="slide_img"></div>
                                    <div class="slide_title">asda阿萨德</div>
                                    <p class="slide_text">阿萨德高度发达速度从中所大所多撒大所多</p>
                                    <div class="slide_price">17.5</div>
                                    <div class="slide_time">9:31</div></div>
                        </li>            
                    </ul>
                </div>
            </div>
        </div>
        <div class="type">
            <ul>
                <li>
                    <div class="type_img">
                        <img src="../../image/mz.png" />
                    </div>
                    <span class="type_tit">时尚美妆</span>
                </li>
                <li>
                    <div class="type_img">
                        <img src="../../image/hf.png" />
                    </div>
                    <span class="type_tit">护肤</span>
                </li>
                <li>
                    <div class="type_img">
                        <img src="../../image/hl.png" />
                    </div>
                    <span class="type_tit">个人护理</span>
                </li>
                <li>
                    <div class="type_img">
                        <img src="../../image/sh.png" />
                    </div>
                    <span class="type_tit">精品生活</span>
                </li>
                <li>
                    <div class="type_img">
                        <img src="../../image/cs.png" />
                    </div>
                    <span class="type_tit">超市</span>
                </li>
                <li>
                    <div class="type_img">
                        <img src="../../image/hh.png" />
                    </div>
                    <span class="type_tit">发现好货</span>
                </li>
                <li>
                    <div class="type_img">
                        <img src="../../image/or.png" />
                    </div>
                    <span class="type_tit">其他</span>
                </li>
            </ul>
        </div>
        <div class="type_main">
            <div class="real_type_main">
                <div class="type_item">
                    <div class="type_title">
                        <img src="../../image/mz_title.png" />
                    </div>
                    <div class="class_item">

                    </div>
                    <div class="class_item">
                        
                    </div>
                    <div class="class_item">
                        
                    </div>
                    <div class="class_item">
                        
                    </div>
                    <div class="class_item">
                        
                    </div>
                </div>
                <div class="type_item"  style="opacity: 0;">
                    <div class="type_title">
                        <img src="../../image/hf_title.png" />
                    </div>
                    <div class="class_item">

                    </div>
                    <div class="class_item">
                        
                    </div>
                    <div class="class_item">
                        
                    </div>
                    <div class="class_item">
                        
                    </div>
                    <div class="class_item">
                        
                    </div>
                </div>
                <div class="type_item"  style="opacity: 0;">
                    <div class="type_title">
                        <img src="../../image/hl_title.png" />
                    </div>
                    <div class="class_item">

                    </div>
                    <div class="class_item">
                        
                    </div>
                    <div class="class_item">
                        
                    </div>
                    <div class="class_item">
                        
                    </div>
                    <div class="class_item">
                        
                    </div>
                </div>
                <div class="type_item"  style="opacity: 0;">
                    <div class="type_title">
                        <img src="../../image/sh_title.png" />
                    </div>
                    <div class="class_item">

                    </div>
                    <div class="class_item">
                        
                    </div>
                    <div class="class_item">
                        
                    </div>
                    <div class="class_item">
                        
                    </div>
                    <div class="class_item">
                        
                    </div>
                </div>
                <div class="type_item" style="opacity: 0;">
                    <div class="type_title">
                        <img src="../../image/cs_title.png" />
                    </div>
                    <div class="class_item">

                    </div>
                    <div class="class_item">
                        
                    </div>
                    <div class="class_item">
                        
                    </div>
                    <div class="class_item">
                        
                    </div>
                    <div class="class_item">
                        
                    </div>
                </div>
                <div class="type_item" style="opacity: 0;">
                    <div class="type_title">
                        <img src="../../image/hh_title.png" />
                    </div>
                    <div class="class_item">

                    </div>
                    <div class="class_item">
                        
                    </div>
                    <div class="class_item">
                        
                    </div>
                    <div class="class_item">
                        
                    </div>
                    <div class="class_item">
                        
                    </div>
                </div>
            </div>
        </div>
        <!-- <div class="hot_main">
            <span class="hot_tips">上热门</span>
            <ul>
                <li>
                    <div class="hot_img_box"></div>
                    <div class="hot_info">
                        <p class="hot_text">天,好蓝好蓝好蓝好蓝好蓝好蓝好蓝好蓝,水,好清好清好清好清好清好清好清好清</p>
                        <div class="hot_user_info">
                            <div class="hot_head_img"></div>
                            <div class="hot_user_name">13550860665</div>
                            <div class="hot_time">9:31</div>
                        </div>
                        <div class="zan">
                            <img class="zan_icon" src="../../image/zan.png">
                            <div class="zan_num">1.5万</div>
                        </div>
                    </div>
                    <div class="hot_shadow"></div>
                </li>
                <li>
                    <div class="hot_img_box"></div>
                    <div class="hot_info">
                        <p class="hot_text">天,好蓝好蓝好蓝好蓝好蓝好蓝好蓝好蓝</p>
                        <div class="hot_user_info">
                            <div class="hot_head_img"></div>
                            <div class="hot_user_name">13550</div>
                            <div class="hot_time">9:31</div>
                        </div>
                        <div class="zan">
                            <img class="zan_icon" src="../../image/zan.png">
                            <div class="zan_num">1.5万</div>
                        </div>
                    </div>
                    <div class="hot_shadow"></div>
                </li>
                <li>
                    <div class="hot_img_box"></div>
                    <div class="hot_info">
                        <p class="hot_text">天,好蓝好蓝好蓝好蓝</p>
                        <div class="hot_user_info">
                            <div class="hot_head_img"></div>
                            <div class="hot_user_name">水电费</div>
                            <div class="hot_time">9:31</div>
                        </div>
                        <div class="zan">
                            <img class="zan_icon" src="../../image/zan.png">
                            <div class="zan_num">1.5万</div>
                        </div>
                    </div>
                    <div class="hot_shadow"></div>
                </li>
            </ul>
        </div> -->
    </div>
</div>
</body>
<script>
    $(function(){
        TouchSlide({ slideCell:"#leftTabBox",delayTime:260,effect:'leftLoop',autoPlay:true});
        TouchSlide({ slideCell:"#mid_rec",delayTime:260,effect:'leftLoop',startFun:function(i,c){
            if(i==0)
            {
                $(".div0").css('position','relative');
                $(".div0").animate({width:'130%',height:'10rem',left:'-2rem',top:'-1rem'});
                $(".div1").animate({width:'100%',height:'8rem',left:'0rem',top:'0rem'},function(){
                    $(".div1").css('position','');
                });
                $(".div2").animate({width:'100%',height:'8rem',left:'0rem',top:'0rem'},function(){
                    $(".div2").css('position','');
                });
            }else if(i==1)
            {
                $(".div1").css('position','relative');
                $(".div1").animate({width:'130%',height:'10rem',left:'-2rem',top:'-1rem'});
                $(".div0").animate({width:'100%',height:'8rem',left:'0rem',top:'0rem'},function(){
                    $(".div0").css('position','');
                });
                $(".div2").animate({width:'100%',height:'8rem',left:'0rem',top:'0rem'},function(){
                    $(".div2").css('position','');
                });
            }else if(i==2)
            {
                $(".div2").css('position','relative');
                $(".div2").animate({width:'130%',height:'10rem',left:'-2rem',top:'-1rem'});
                $(".div0").animate({width:'100%',height:'8rem',left:'0rem',top:'0rem'},function(){
                    $(".div0").css('position','');
                });
                $(".div1").animate({width:'100%',height:'8rem',left:'0rem',top:'0rem'},function(){
                    $(".div1").css('position','');
                });
            }
        }});
        $('.mid_rec .tempWrap').css('overflow','')
        $('.mid_rec .bd').css('overflow','')
        $('.hot_tit').click(function(){
            $(this).animate({fontSize:'1.6rem',lineHeight:'3.8rem'},'fast');
            $(this).css('color','#f7911b');
            $('.look_tit').animate({fontSize:'1.4rem',lineHeight:'4rem'},'fast');
            $('.look_tit').css('color','#666666');
        })
        $('.look_tit').click(function(){
            $(this).animate({fontSize:'1.6rem',lineHeight:'3.8rem'},'fast');
            $(this).css('color','#f7911b');
            $('.hot_tit').animate({fontSize:'1.4rem',lineHeight:'4rem'},'fast');
            $('.hot_tit').css('color','#666666');
        })
        $('.type ul li').click(function(){
            var index = $('.type ul li').index(this);
            $('.main').animate({  
               scrollTop: 930
           }, 500  
       );  
            //$('.type_item:not(:eq('+index+'))').css('display','none');
            $('.real_type_main').animate({marginLeft:"-"+index+"0"+index+"%"},'slow')
            $('.type_item:not(:eq('+index+'))').animate({opacity:"0"},function(){
                $('.type_item:eq('+index+')').animate({opacity:"1"},'slow')
            })
            
            
        })
    })
</script>
</html>